<template>
    <el-main>
        <div id="cesiumContainer"></div>
        <div style="position: absolute;bottom: 2px;left:35%;width: 354px;height: 44px;">
            <el-button type="primary" @click.native="gotoView" style="position: absolute;left:0;width:19%;height:100%;font-size: 300%;background-color: rgba(0, 0, 0, 0.5) !important;" plain>
                <i class="el-icon-view" style="position: absolute;top:0;left: 15%;color: white; "></i>
            </el-button>
            <el-button type="primary" @click.native="erSanWeiQieHuan" style="position: absolute;left:16%;width:20%;height:100%;background-color: rgba(0, 0, 0, 0.5) !important;" plain>
                <i class="eswfamily eswersanweibangding" style="position: absolute;top:0;left:20%;color: white"></i>
            </el-button>
            <el-button
                type="primary"
                @click.native="jumpCurrentLocation"
                style="position: absolute;left:36%;font-size: 280%;width:20%;height:100%;background-color: rgba(0, 0, 0, 0.5) !important;"
                plain
            >
                <i class="el-icon-location-outline" style="position: absolute;top:0;left: 15%;color: white"></i>
            </el-button>
            <el-button type="primary" @click.native="jumpHomeLocation" style="position: absolute;left:56%;font-size: 300%;width:20%;height:100%;background-color: rgba(0, 0, 0, 0.5) !important;" plain>
                <i class="el-icon-s-home" style="position: absolute;top: 0;left:15%;color: white"></i>
            </el-button>
        </div>
        <!--        <el-button @click.native="cameraTest"-->
        <!--                   style="width:20px;position: absolute;top: 67%;right: 3%;color: white;border-color: white;" plain>-->
        <!--            <i class="el-icon-mobile-phone" style="position: absolute;top: 5px;right: 13px;color: white"></i>-->
        <!--        </el-button>-->
        <div style="position: absolute;top: 40%;right:1%;color: white;height:100px;width:50px">
            <el-button
                @click.native="big"
                style="width:100%;height:45%;position: absolute;top:0;right:0;color: white;border-color: white;font-size: 270%;background-color: rgba(0, 0, 0, 0.5) !important;"
                plain
            >
                <i class="el-icon-plus" style="position: absolute;top: 0;right:5%;color: white"></i>
            </el-button>
            <el-button
                @click.native="small"
                style="width:100%;height:45%;position: absolute;top:55%;right:0;color: white;border-color: white;text-align:center;font-size: 270%;background-color: rgba(0, 0, 0, 0.5) !important;"
                plain
            >
                <i class="el-icon-minus" style="position: absolute;top:0;right: 5%;color: white"></i>
            </el-button>
        </div>
        <cesium-draw-viewer v-show="showDrawManager" style="position: absolute;z-index: 999;right: 10px;top: 100px;width: 205px" ref="drawManager"></cesium-draw-viewer>

        <!--        <el-dropdown trigger="click" style="width:34px;position: absolute;top: 2%;right: 1%;" @command="routeToComponent">-->
        <!--            <el-button id="setting" class="el-dropdown-link" style="background-color: #4F94CD" type="danger" icon="el-icon-more" circle></el-button>-->
        <!--            <el-dropdown-menu slot="dropdown">-->
        <!--                <el-dropdown-item command="ToolbarAddDataComponent" icon="el-icon-s-tools">数据添加</el-dropdown-item>-->
        <!--                <el-dropdown-item command="ToolbarRemoveDataComponent" icon="el-icon-s-tools">数据删除</el-dropdown-item>-->
        <!--                <el-dropdown-item command="restart" icon="el-icon-s-tools">重启</el-dropdown-item>-->
        <!--                <el-dropdown-item command="exit" icon="el-icon-switch-button">退出</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--        </el-dropdown>-->

        <el-input style="position: absolute;top: 6%;left: 1%;width: 200px" placeholder="请输入" v-model="input.text1" @change="posChange" clearable>
            <el-button slot="append" @click.native.prevent="findPositionByGeoJSon(input.text1)" icon="el-icon-search"></el-button>
        </el-input>
        <!--
        <div id="pppp" style="position: absolute;top: 6%;left: 45%;width: 200px;background-color: yellow">
            asda
        </div>-->

        <el-button
            @click.native="mainFunction"
            style="width:61px;height:58px;position: absolute;top: 74%;left: 2%;color: white;border-color: white;font-size: 300%;background-color: rgba(0, 0, 0, 0.5) !important;"
            plain
        >
            <i class="el-icon-menu" style="position: absolute;top: 10%;right: 10%;color: white"></i>
        </el-button>
        <div id="maplevel" style="left:0;bottom:3%;position: absolute;">L:{{zoomlevel}}</div>
        <div id="positionResult" style="width:400px;display: none;color: white;height:6vh;top:5%">
            <i @click="close" size="medium" class="el-icon-close" style="color: white;margin-top: 5px;float: right;margin-right: 5px"></i>
            <div style="height: 6vh;">
                <center>
                    <a style="font-size: 22px">
                        地名列表
                    </a>
                    <a style="font-size: 10px"> (共搜到{{ tableCount }}个结果) </a>
                </center>
            </div>
            <el-table
                height="500"
                @row-click="rowClick"
                :data="tableData"
                :cell-style="{ textAlign: 'center' }"
                :show-header="false"
                :row-class-name="rowClassName"
                style="width: 100%;background-color: rgba(0,0,0,0.5);font-size: 20px"
            >
                <el-table-column type="index"></el-table-column>
                <el-table-column prop="posName"></el-table-column>
            </el-table>
            <!--</el-scrollbar>-->
        </div>
    </el-main>
</template>
<style>
.compass {
    right: 0;
    top: 2%;
}
</style>
<script>
import Log from "../../plugins/utils/log";
import GPSHandler from "../../plugins/mev/gps/gps_handler";
import Environment from "../../plugins/utils/environment";
import CesiumDrawViewer from "../mev/draw/cesiumDrawViewer";
import CesiumNavigation from "cesium-navigation-es6";
import Objects from "../../plugins/utils/objects";
import retrieval from "../../plugins/mev/menubar/menubar";
import LayerManager from "../../plugins/mev/layer/LayerManager";
import GeojsonData from "@/plugins/mev/GeojsonData/GeojsonData";
import Map from "../../plugins/app/Map";
import * as Cesium from "cesium";

let retrievalSubstance_array = [];

export default {
    name: "Main",

    data() {
        return {
            tableCount: "0",
            tableData: [],
            imgUrl1: require("@/assets/images/23.png"),
            loading: true,
            showDrawManager: false,
            drawManagerInited: false,
            zoomlevel:0,
            input: {
                text1: ""
            },
            flag: true,
            /*imgPrefix: "/mev:img",*/
            imgPrefix: LayerManager.imgPrefix,
            demPrefix: LayerManager.demPrefix,
            view: null,
            PosDefaultProps: {
                /*children: "children",*/
                label: "label"
            }
        };
    },
    components: { CesiumDrawViewer },
    methods: {
        rowClick(row, column, event) {
            let that = this;
            that.posDatas.forEach(function(item) {
                if (item.uuid === row.uuid) {
                    GeojsonData.getInstance().createPosotionPoint(
                        item.posName,
                        parseFloat(item.lon),
                        parseFloat(item.lat),
                        parseFloat(item.alt),
                        parseFloat(item.heading),
                        parseFloat(item.pitch),
                        parseFloat(item.roll)
                    );
                }
            });
        },
        rowClassName({row,rowIndex}){
            row.index=rowIndex;
        },
        close() {
            let that = this;
            let positionResult = document.getElementById("positionResult");
            if (positionResult.style.display === "block") {
                positionResult.style.display = "none";
                that.tableData = undefined;
                that.tableData = new Array();
            }
        },
        getp() {
            let p = document.getElementById("pppp");
            navigator.geolocation.getCurrentPosition(
                res => {
                    p.innerText = res.coords.latitude + " " + res.coords.longitude + " " + new Date().toString();
                },
                err => {
                    p.innerText = err.code + " " + err.message;
                }
            );
        },
        loadData() {
            LayerManager.getInstance().loadData();
        },
        gotoView: function() {
            this.$router.push({ name: "EmptyComponent" });
            let leftside = document.getElementById("leftSide");
            leftside.style.display = "none";
            this.$router.push({ name: "ViewPointComponent" });
        },

        
        altitozoom(height) {
            var a = 40487.57;
            var b = 0.00007096758;
            var c = 91610.74;
            var d = -40467.74;
            return Math.round(d + (a - d) / (1 + Math.pow(height / c, b)));
        },
        createViewer: function() {
            let viewer = Map.init();
            let options = {};
            // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
            options.enableCompass = true;
            // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件 将不会添加到地图中。
            options.enableZoomControls = false;
            // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
            options.enableDistanceLegend = false;
            // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
            options.enableCompassOuterRing = true;
            CesiumNavigation(viewer, options);

let that = this;
            viewer.camera.changed.addEventListener(()=>{
	// 当前高度
	let height= viewer.camera.positionCartographic.height;

   // viewer.camera.positionCartographic.height;

                    var czoom = this.altitozoom(height);
                    that.zoomlevel = czoom;
                    //console.log(czoom);
	// 下面可以写其他的代码了
});
        },
        jumpHomeLocation: function() {
            let that = this;
            window.cesiumViewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(110.15, 34.54, 19059568),
                orientation: new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-89), Cesium.Math.toRadians(0))
            });
        },
        jumpCurrentLocation: function() {
           let res = GPSHandler.getInstance().showCurrentPosition();
           if(!res){
               this.$message("请打开定位服务")
           }
        },
        big: function() {
            window.cesiumViewer.camera.moveForward();
        },

        small: function() {
            window.cesiumViewer.camera.moveBackward();
        },

        //经纬度查询
        retrievalToList: function(retrievalSubstance) {
            let that = this;
            retrieval.findPosition(retrievalSubstance, that, window.cesiumViewer, retrievalSubstance_array);
        },
        mainFunction: function() {
            if (this.$route.name !== "EmptyComponent") {
                this.$router.push({ name: "EmptyComponent" });
            }
            let leftside = document.getElementById("leftSide");
            if (leftside.style.display === "none") {
                leftside.style.display = "block";
            } else {
                leftside.style.display = "none";
            }
        },
        routeToComponent: function(componentName) {
            if (componentName === "restart") {
                this.$confirm("此操作将重启应用,是否继续？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    JavaContext.restartApp();
                });
            } else if (componentName === "exit") {
                this.$confirm("此操作将退出应用,是否继续？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    let cameraPos = window.cesiumViewer.camera.position;
                    // 获取当前坐标系标准
                    let ellipsoid = window.cesiumViewer.scene.globe.ellipsoid;
                    // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
                    let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
                    // 获取镜头的高度
                    let height = cartographic.height;
                    // 根据上面当前镜头的位置，获取该中心位置的经纬度坐标
                    let centerLon = parseFloat(Cesium.Math.toDegrees(cartographic.longitude).toFixed(8));
                    let centerLat = parseFloat(Cesium.Math.toDegrees(cartographic.latitude).toFixed(8));

                    // 镜头拉近  heading: window.cesiumViewer.camera.heading,  pitch: window.cesiumViewer.camera.pitch, roll: window.cesiumViewer.camera.roll

                    let option = {
                        check: true,
                        centerLon: centerLon,
                        centerLat: centerLat,
                        height: height,
                        heading: window.cesiumViewer.camera.heading,
                        pitch: window.cesiumViewer.camera.pitch,
                        roll: window.cesiumViewer.camera.roll
                    };
                    JavaContext.SaveJumpInfo(JSON.stringify(option));
                    JavaContext.exitApp();
                });
            }

            if (Objects.isEmpty(componentName)) {
                Log.info("尚未实现");
                return;
            }

            if (this.$route.name !== componentName) {
                this.$router.push({ name: componentName });
            }
        },
        erSanWeiQieHuan() {
            if (this.flag) {
                window.cesiumViewer.scene.morphTo2D(1); //二维
                this.flag = false;
            } else {
                window.cesiumViewer.scene.morphTo3D(1); //三维
                this.flag = true;
            }
        },
        findPositionByGeoJSon(name) {
            this.tableCount = "0";
            let positionResult = document.getElementById("positionResult");
            if (positionResult.style.display === "none") {
                positionResult.style.display = "block";
            }
            let that = this;
            GeojsonData.getInstance().initData(that, name);
        },
        PoshandleNodeClick(data) {
            let that = this;
            that.posDatas.forEach(function(item) {
                if (item.uuid === data.uuid) {
                    GeojsonData.getInstance().createPosotionPoint(item.posName, parseFloat(item.lon), parseFloat(item.lat));
                }
            });
        },
        posChange(d) {
            let that = this;
            if (d === "") {
                GeojsonData.getInstance().clear();
                let positionResult = document.getElementById("positionResult");
                if (positionResult.style.display === "block") {
                    positionResult.style.display = "none";
                }
            }
        },
        cameraTest() {
            JavaContext.loadCamera();
        }
    },
    created() {},
    mounted() {
        let that = this;
        this.$nextTick().then(() => {
            //let viewer = 
            that.createViewer();
            that.loading = false;
            // GPSHandler.getInstance().getPositionInterval(2);
            window.showDrawManager = function(b) {
                that.showDrawManager = b;
                if (b && !that.drawManagerInited) {
                    that.$refs.drawManager.init(window.cesiumViewer);
                    that.drawManagerInited = true;
                }
            };
            if(JavaContext.ReadJumpInfo){
                let str = JavaContext.ReadJumpInfo();
                let pos = JSON.parse(str);
                if (pos.lastpoistion.check === true) {
                    window.cesiumViewer.camera.flyTo({
                        destination: Cesium.Cartesian3.fromDegrees(pos.lastpoistion.centerLon, pos.lastpoistion.centerLat, pos.lastpoistion.height),
                        orientation: new Cesium.HeadingPitchRoll(pos.lastpoistion.heading, pos.lastpoistion.pitch, pos.lastpoistion.roll)
                    });
                }
            }
        });
    }
};
</script>

<style scoped>
.el-main,
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.el-icon-my-export {
    background: url("~@/assets/images/23.png") center no-repeat;
    background-size: contain;
}

#positionResult {
    background-color: rgba(128, 128, 128, 0.8);
    width: 388px;
    height: 170px;
    top: 42px;
    left: 230px;
    z-index: 2;
    position: absolute;
    margin: 0;
    padding: 0;
    border-radius: 10px 10px 0px 0px;
}
</style>
<style>
.el-input__inner {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
.el-input-group__append {
    background-color: rgba(0, 0, 0, 0.5) !important;
}
</style>
